<!--
1. Vue 实例的生命周期
    1. 创建
        1. beforeCreate
        2. created
        3. beforeMount
        4. mounted
    2. 运行
        1. beforeUpdate
        2. updated
        3. 当data数据的改变的时候，会触发这两个函数
    3. 销毁
2. 生命周期钩子=生命周期函数=生命周期事件

-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"ok"
            },
            methods:{
                show(){
                    alert("show!");
                }
            },
            beforeCreate(){
                // 这是第一个生命周期函数，
                // 表示实例完全被创建出来之前会执行它,
                // 此时data还没有初始化
                // 此时methods也没有进行初始化
                console.log("beforeCreate");
            },
            created(){
                // 这是第二个生命周期函数
                // 执行这个函数前，data和methods都已经被初始化好了
                console.log("created");
            },
            beforeMount(){
                // 这是第三个生命周期函数
                // 模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
                // 在beforeMount执行的时候，页面中的元素还没有被真正替换过来
                console.log("beforeMount");
            },
            mounted(){
                // 这是第四个生命周期函数
                // 执行这个函数的时候，内存中的模板已经真实的挂载到了页面中，页面已经被渲染好了
                console.log("mounted")
            },
            beforeUpdate(){
                // 当数据发生变化后，界面还没有被更新
                console.log("beforeUpdate");

            },
            updated(){
                // 页面更新后
                console.log("updated");
            },
            beforeDestroy(){
                // 即将进入销毁阶段，data和methods都处于可用状态
            },
            destroyed(){
                // 组件已经完全被销毁了。
            }

        })
    </script>
</body>
</html>